@if (getParams(content, 'mode') === 'horizontal') {
  <mat-horizontal-stepper
    [linear]="getParams(content, 'linear')"
    [labelPosition]="getParams(content, 'labelPosition')"
    #stepper
  >
    @for (step of content.steps; track step) {
      <mat-step [color]="step.color" [completed]="step.completed">
        <ng-template matStepLabel>{{ step.label }}</ng-template>
        @if (step.elements) {
          @for (item of step.elements; track item) {
            <app-dynamic-component [inputs]="item" />
          }
        }
      </mat-step>
    }
  </mat-horizontal-stepper>
}

@if (getParams(content, 'mode') === 'vertical') {
  <mat-vertical-stepper [linear]="getParams(content, 'linear')" #stepper>
    @for (step of content.steps; track step) {
      <mat-step [color]="step.color" [completed]="step.completed">
        <ng-template matStepLabel>{{ step.label }}</ng-template>
        @if (step.elements) {
          @for (item of step.elements; track item) {
            <app-dynamic-component [inputs]="item" />
          }
        }
      </mat-step>
    }
  </mat-vertical-stepper>
}
